<template>
  <div v-loading="this.loading">
    <el-row style="margin-top: 30px;" :gutter="20">
      <el-col :offset="10" :span="4">
        <div class="search-container">
          <el-input
            v-model="city"
            placeholder="请输入城市名"
            maxlength="10"
            class="search-input"
            @input="handleSearchInput"
          ></el-input>
          <el-button type="success" @click="handleWeather" class="search-button">查询城市天气</el-button> <!-- 添加自定义CSS类 -->
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-if="city.length>0">
      <el-col :offset="2" :span="20">
        <el-descriptions title="当前实时天气">
          <el-descriptions-item label="当前城市">{{ city }}</el-descriptions-item>
          <el-descriptions-item label="温度">{{ weather.realtime.temperature }}℃</el-descriptions-item>
          <el-descriptions-item label="风向">{{ weather.realtime.direct }}</el-descriptions-item>
          <el-descriptions-item label="风力">{{ weather.realtime.power }}</el-descriptions-item>
          <el-descriptions-item label="湿度">{{ weather.realtime.humidity }}%</el-descriptions-item>
          <el-descriptions-item label="天气状况">{{ weather.realtime.info }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <el-row v-for="item in weather.future" :key="item.date" style="margin-top: 30px;" :gutter="20">
      <el-col :offset="2" :span="20">
        <el-descriptions :title="item.date" :column="4">
          <el-descriptions-item label="风向">{{ item.direct }}</el-descriptions-item>
          <el-descriptions-item label="温度">{{ item.temperature }}</el-descriptions-item>
          <el-descriptions-item label="天气情况">{{ item.weather }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getWeather,getLocalCityName} from "@/api/gzh/weather";
import { ElMessage } from 'element-ui';
export default {
  name: "weather",
  data() {
    return {
      loading:false,
      oldCity:"",
      city: "",
      weather: {
        realtime: {},
        future: []
      }
    }
  },
  //钩子函数
  created() {
    this.handleLocalCityName();
    this.handleWeather();
  },
  methods: {
    //查询天气
    handleWeather() {
      this.loading = true;
      let params = {
        city : this.city
      }
      getWeather(params).then(res => {
        const weatherInfo = JSON.parse(res.msg);
        if (weatherInfo.error_code === 0){
          this.city = weatherInfo.result.city
          this.weather.realtime = weatherInfo.result.realtime
          this.weather.future = weatherInfo.result.future
          this.loading = false;
        }else{
          this.$message({
            message: weatherInfo.reason +"，请更换（县，市）级地名试试~",
            type: 'warning'
          });
          this.loading = false;
        }
      }).catch(err => {
        this.loading = false;
        console.error(err)
      })
    },
    //获取当前地理位置
    handleLocalCityName() {
      getLocalCityName().then(res => {
        this.city = res.cityName;
        this.oldCity = res.cityName;
      }).catch(err => {
        console.error(err)
      })
    },
    handleSearchInput(){
      if (this.city != this.oldCity){
        //清空数据
        this.weather.future = {};
        this.weather.realtime = {};
      }
    }
  }
}
</script>

<style scoped>
.search-container {
  display: flex; /* 使用弹性盒子布局 */
  align-items: center; /* 垂直居中对齐元素 */
}

.search-input {
  width: 200px;
  margin-right: 5px; /* 设置搜索框右侧的间距 */

}

.search-button {
  /* 你可以添加其他样式，以满足你的需要 */
  width: 120px;
}
</style>
